import React, { Component } from 'react'
import { Button, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import ToolCard from '../../../ComponentsCard/ToolCard'
import './index.css'
import { getCookie } from '../../../Utils/Cookie_'
export default class ChooseManage extends Component {
  state = {
    campusName: '',
    campusManageList: [],
  }
  componentDidMount = () => {
    const campusId = getCookie('campusId')
    console.log(campusId)
    this.setState({
      campusName: '广东校区',
      campusManageList: [
        {
          name: '课程管理',
          id: 4,
          to: '/homePage/teachingResearchManagement/campusManagement/CourseManagement',
        },
        {
          name: '课件管理',
          id: 5,
          to: '/homePage/teachingResearchManagement/campusManagement/CoursewareManagement',
        },
        {
          name: '回收站',
          id: 6,
          to: '/homePage/teachingResearchManagement/campusManagement/RecycleBin',
        },
      ],
    })
  }
  render() {
    const { campusName, campusManageList } = this.state
    return (
      <div className="campus-box">
        {/* 校区选择/title */}
        <div className="campus-header-title">
          <div className="header-name">{campusName}</div>
          <div className="header-search">
            <Input
              placeholder="搜索内容"
              prefix={<SearchOutlined style={{ color: '#c4c8cf' }} />}
            />
            <Button style={{ marginLeft: '25px' }} type="primary">
              立即搜索
            </Button>
          </div>
        </div>
        {/* 请求得到的校区列表 */}
        <div className="campus-card-list">
          {campusManageList.map((item, index) => {
            return (
              <ToolCard
                key={index}
                toObj={item.to}
                cardData={item}
                dataName="name"
                dataColor="id"
              />
            )
          })}
        </div>
      </div>
    )
  }
}
